<template>
	<div class="zco-file-message-container">
		<div class="zco-file-message-name" :id="id">
			{{ filename }}
		</div>
		<div class="zco-file-message-icon">
			<img :src="fileIcon" alt="" srcset="" />
		</div>
	</div>
</template>

<script>
export default {
	props: {
		fileType: {
			type: String,
			default: () => ''
		},
		fileName: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			fileIcon: '',
			suffix: '',
			filename: '',
			id: parseInt(Math.random() * 999)
		};
	},
	computed: {},
	watch: {},
	mounted() {
		this.filename = this.fileName;
		this.id = this.getOnlyId();
		switch (this.fileType.toLowerCase()) {
			case 'pdf':
				this.fileIcon = require('../../assets/img/pdf-file.png');
				break;
			case 'xlsx':
				this.fileIcon = require('../../assets/img/xlsx-file.png');
				break;
			case 'doc':
				this.fileIcon = require('../../assets/img/word-file.png');
				break;
			case 'docx':
				this.fileIcon = require('../../assets/img/word-file.png');
				break;
			case 'zip':
				this.fileIcon = require('../../assets/img/zip-file.png');
				break;
			case 'rar':
				this.fileIcon = require('../../assets/img/zip-file.png');
				break;
			case 'mp4':
				this.fileIcon = require('../../assets/img/video-file.png');
				break;
			case 'mov':
				this.fileIcon = require('../../assets/img/video-file.png');
				break;
			case 'wave':
				this.fileIcon = require('../../assets/img/audio-file.png');
				break;
			case 'wav':
				this.fileIcon = require('../../assets/img/audio-file.png');
				break;
			case 'mp3':
				this.fileIcon = require('../../assets/img/audio-file.png');
				break;
			case 'wma':
				this.fileIcon = require('../../assets/img/audio-file.png');
				break;
			default:
				this.fileIcon = require('../../assets/img/unknown-file.png');
				break;
		}
		this.$nextTick(() => {
			let fileNameBox = document.getElementById(this.id);
			if (fileNameBox && fileNameBox.scrollHeight > fileNameBox.offsetHeight) {
				let maxWidth = 143 * 2;
				let result = '';
				let name = this.fileName.substr(0, this.fileName.length - (this.fileType.length + 1));
				let txtEnd = this.fileName.substr(this.fileName.length - (this.fileType.length + 3), this.fileType.length + 3);
				txtEnd = '...' + txtEnd;
				result = name + txtEnd;
				let fileNameWidth = this.computeFontSize(result, 12);
				while (fileNameWidth.width + 5 > maxWidth) {
					name = name.substr(0, name.length - 1);
					result = name + txtEnd;
					fileNameWidth = this.computeFontSize(result, 12);
				}
				console.log('zco-im: result', result, new Date());
				this.filename = result;
				this.suffix = result.toLowerCase();
				console.log('zco-fileName:文件名超出', this.filename, new Date());
			}
		});
	},
	methods: {
		computeFontSize(str, size) {
			const spanDom = document.createElement('span');
			spanDom.style.fontSize = size + 'px'; // 12px
			spanDom.style.lineHeight = '17px';
			spanDom.style.height = '34px';
			spanDom.style.fontWeight = 400;
			spanDom.innerHTML = str;
			document.body.append(spanDom);
			const sizeD = { width: 48 };
			sizeD.width = spanDom.offsetWidth;
			spanDom.remove();
			return sizeD;
		},
		getOnlyId() {
			let abc = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'g', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
			let [max, min] = [Math.floor(Math.random() * (10 - 7 + 1) + 1), Math.floor(Math.random() * (17 - 10 + 1) + 17)];
			abc = abc
				.sort(() => 0.4 - Math.random())
				.slice(max, min)
				.slice(0, 8)
				.join('');
			var a = new Date().getTime() + abc;
			return a;
		}
	}
};
</script>

<style scoped>
.zco-file-message-container {
	cursor: pointer;
	width: 210px;
	height: 60px;
	background: #fafafa;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
	border-radius: 2px;
	display: flex;
}
.zco-file-message-icon {
	margin: 10px 10px 0 22px;
}
.zco-file-message-icon img {
	width: 28px;
	height: 31px;
}
.zco-file-message-name {
	width: 168px;
	height: 34px;
	font-size: 12px;
	font-weight: 400;
	color: #1b1b1b;
	line-height: 17px;
	margin: 12px 0 10px 7px;
	overflow: hidden;
	word-break: break-all;
}
</style>
